<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>04-使用promise封装ajax请求</title>
</head>

<body>
  <script>
    // 可复用的发 ajax 请求的函数: xhr + promise
    function sendAjax (url, data) {
      // 1. 创建并返回 Promise 实例对象(pending 状态), 指定执行器函数
      return new Promise((resolve, reject) => {
        // 2. 在执行器函数中启动异步任务
        console.log('异步任务启动---');
        // 3.发送ajax请求
        const xhr = new XMLHttpRequest();
        //处理query请求参数，将对象形式转成字符串
        let queryStr = '';
        for (const key in data)
        {
          queryStr += `?${key}=${data[key]}&`;
        }
        queryStr = queryStr.slice(0, -1);
        xhr.open('GET', url + queryStr);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4)
          {
            if (xhr.status >= 200 && xhr.status < 300)
            {
              // 请求成功, 调用 resolve(value)
              resolve(xhr.response)
            } else
            {
              // 请求失败, 调用 reject(reason)
              reject(new Error('状态码：' + xhr.status))
            }
          }
        }
      })
    };

    //调用封装的方法
    const promise = sendAjax('https://api.github.com/search/users', { q: 'ajax' });
    //4. 调用then()为Promise 实例对象指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
    promise.then(
      (value) => { console.log(`成功的value：${value}`); },
      (reason) => { console.log(`失败原因：${reason}`); }
    )

  </script>
</body>

</html>